<template>
  <div class="main">
    <div style="background-color: white">
      <el-input v-model="user.userName" placeholder="请输入用户名"></el-input>
      <el-select v-model="user.sex" placeholder="请选择">
        <el-option
          v-for="item in sexOptions"
          :key="item.value"
          :value="item.value"
        >
        </el-option>
      </el-select>

      <el-tooltip class="item" effect="dark" content="查询" placement="top-end">
        <el-button
          icon="el-icon-search"
          type="primary"
          circle
          @click="getDate()"
        ></el-button>
      </el-tooltip>
      <el-tooltip class="item" effect="dark" content="重置" placement="top-end">
        <el-button
          icon="el-icon-refresh-left"
          @click="reset()"
          type="info"
          circle
        ></el-button>
      </el-tooltip>
      <el-tooltip class="item" effect="dark" content="添加" placement="top-end">
        <el-button
          icon="el-icon-circle-plus-outline"
          type="primary"
          @click="openDialog('add')"
          style="margin-left: 400px"
          circle
        ></el-button>
      </el-tooltip>
    </div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column v-if="false" prop="id" label="id"> </el-table-column>
      <el-table-column
        prop="userName"
        label="用户名"
        width="180"
      ></el-table-column>
      <el-table-column
        prop="telephone"
        label="手机号"
        width="220"
      ></el-table-column>
      <el-table-column prop="sex" label="性别"> </el-table-column>
      <el-table-column prop="birthday" label="生日"> </el-table-column>
      <el-table-column prop="perSignature" label="个性签名"> </el-table-column>
      <el-table-column prop="" label="操作">
        <template slot-scope="scope">
          <el-tooltip
            class="item"
            effect="dark"
            content="删除"
            placement="top-end"
          >
            <el-popconfirm
              title="您确定删除这个用户么？"
              cancel-button-text="算了算了"
              @confirm="handleDel(scope.row.id)"
            >
              <el-button
                slot="reference"
                type="danger"
                icon="el-icon-delete"
                circle
              ></el-button>
            </el-popconfirm>
          </el-tooltip>
          <el-tooltip
            class="item"
            effect="dark"
            content="编辑"
            placement="top-end"
          >
            <el-button
              style="margin-left: 10px"
              type="primary"
              @click="openDialog('edit', scope.row)"
              icon="el-icon-edit"
              circle
            ></el-button>
          </el-tooltip>
          <el-tooltip
            class="item"
            effect="dark"
            content="已加入团队管理"
            placement="top-end"
          >
            <el-button
              type="primary"
              @click="openTeamDialog(scope.row)"
              icon="el-icon-more"
              circle
            ></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <pagination
        :total="total"
        :pageNum="pageNum"
        :pageSize="pageSize"
        @changePageSize="changePageSize"
        @changePageNum="changePageNum"
      ></pagination>
    </div>

    <el-drawer
      :title="formTitle"
      size="35%"
      :visible.sync="drawerDialog"
      :direction="direction"
      :before-close="handleClose"
    >
      <div class="drawerForm">
        <el-form
          :model="addUserForm"
          ref="addUserForm"
          label-width="180px"
          :rules="rules"
        >
          <el-form-item label="用户名" prop="userName">
            <el-input
              v-model="addUserForm.userName"
              placeholder="请输入用户名"
            ></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input
              :show-password="true"
              v-model="addUserForm.password"
              type="password"
              placeholder="请输入密码"
            ></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="sex">
            <el-select v-model="addUserForm.sex" placeholder="请选择">
              <el-option
                v-for="item in sexOptions"
                :key="item.value"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="手机号" prop="telephone">
            <el-input
              v-model="addUserForm.telephone"
              placeholder="请输入手机号"
            ></el-input>
          </el-form-item>
          <el-form-item label="生日" prop="birthday">
            <el-date-picker
              v-model="addUserForm.birthday"
              type="date"
              placeholder="选择日期"
              style="width: 200px"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="个性签名" prop="perSignature">
            <el-input
              v-model="addUserForm.perSignature"
              type="textarea"
            ></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitAddForm('addUserForm')"
              >提交</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </el-drawer>
    <el-dialog title="团队信息" :visible.sync="teamDialog">
      <el-table :data="teamList">
        <el-table-column
          property="teamName"
          label="团队名"
          width="150"
        ></el-table-column>
        <el-table-column
          property="type"
          label="团队类型"
          width="200"
        ></el-table-column>
        <el-table-column property="relationshipType" label="角色">
          <template slot-scope="scope">
            <span v-if="scope.row.relationshipType == 1">队长</span>
            <span v-if="scope.row.relationshipType == 2">成员</span>
            <span v-if="scope.row.relationshipType == 3">管理员</span>
          </template>
        </el-table-column>
        <el-table-column property="address" label="操作">
          <template slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              content="退出"
              placement="top-end"
            >
              <el-button
                type="warning"
                icon="el-icon-s-promotion"
                @click="exitTeam(scope.row)"
                circle
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <dialogConfirm ref="dialogConfirm"></dialogConfirm>
  </div>
</template>
<script>
import {
  listPage,
  add,
  loDeleteById,
  updateById,
  getTeamListByUser,
} from "@/api/user";
// import { list } from "@/api/team";
import Pagination from "@/components/Pagination/index";
import DialogConfirm from "@/components/DialogConfirm/index";
import { LoDeletedUserAndTeamRea } from "@/api/teamUser";
export default {
  components: {
    Pagination,
    DialogConfirm,
  },
  data() {
    return {
      tableData: [],
      pageNum: 1,
      pageSize: 10,
      total: 10,
      drawerDialog: false,
      teamDialog: false,
      direction: "rtl",
      formTitle: "",
      user: {
        userName: "",
        password: "",
        telephone: "",
        sex: "",
        birthday: "",
        perSignature: "",
      },
      addUserForm: {
        id: "",
        userName: "",
        password: "",
        telephone: "",
        sex: "",
        birthday: "",
        teamName: "",
        perSignature: "",
      },
      sexOptions: [
        {
          value: "男",
        },
        {
          value: "女",
        },
      ],
      teamList: [],
      teamNameList: [],
      rules: {
        userName: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 3,
            max: 20,
            message: "长度在 3 到 20 个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 3,
            max: 20,
            message: "长度在 3 到 20 个字符",
            trigger: "blur",
          },
        ],
        sex: [{ required: true, message: "请选择性别", trigger: "blur" }],
        telephone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            min: 11,
            max: 11,
            message: "请输入11位数手机号",
            trigger: "blur",
          },
        ],
        perSignature: [
          {
            min: 0,
            max: 20,
            message: "字数不能超过20个",
            trigger: "blur",
          },
        ],
        userId: "",
        teamUserName: "",
      },
    };
  },
  methods: {
    changePageSize(val) {
      this.pageSize = val;
      this.getDate();
    },
    changePageNum(val) {
      this.pageNum = val;
      this.getDate();
    },
    getDate() {
      console.log(this.user.userName);
      const param = {
        page: this.pageNum,
        limit: this.pageSize,
        userName: this.user.userName,
        sex: this.user.sex,
      };
      listPage(param).then((res) => {
        // console.log(res.data);
        this.total = res.total;
        this.tableData = res.data;
      });
    },
    reset() {
      this.user.userName = "";
      this.user.sex = "";
      this.getDate();
    },
    delete() {},
    openDialog(name, data) {
      console.log(this.drawerDialog.title);
      this.drawerDialog = true;
      if (name == "add") {
        this.resetAddForm(), (this.formTitle = "添加");
      }
      if (name == "edit") {
        this.formTitle = "编辑";
        this.addUserForm = {
          id: data.id,
          userName: data.userName,
          password: data.password,
          telephone: data.telephone,
          sex: data.sex,
          birthday: data.birthday,
          teamName: data.teamName,
          perSignature: data.perSignature,
        };
      }
    },
    handleClose() {
      console.log("关闭");
      this.drawerDialog = false;
      this.resetAddForm();
    },
    resetAddForm() {
      console.log("重置");
      this.addUserForm = {
        id: "",
        userName: "",
        password: "",
        telephone: "",
        sex: "",
        birthday: "",
        teamName: "",
        perSignature: "",
      };
    },
    async submitAddForm(formName) {
      if (this.formTitle == "添加") {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            add(this.addUserForm).then((res) => {
              if (res.code == 0) {
                this.$message({
                  message: "添加成功",
                  type: "success",
                });
              } else {
                this.$message({
                  message: "添加失败",
                  type: "error",
                });
              }
            });
            this.drawerDialog = false;
          } else {
            this.$message({
              message: "您输入的信息不符合规范",
              type: "warning",
            });
          }
          this.getDate();
        });
      } else if (this.formTitle == "编辑") {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$confirm("此操作将修改此用户信息, 是否继续?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            })
              .then(() => {
                updateById(this.addUserForm).then((res) => {
                  if (res.code == 0) {
                    this.$message({
                      message: "修改成功",
                      type: "success",
                    });
                  } else {
                    this.$message({
                      message: "修改失败",
                      type: "error",
                    });
                  }
                  this.getDate();
                  this.drawerDialog = false;
                  this.resetAddForm();
                });
              })
              .catch(() => {
                this.$message({
                  type: "info",
                  message: "已取消删除",
                });
              });
          } else {
            this.$message({
              message: "您输入的信息不符合规范",
              type: "warning",
            });
          }
        });
      }
    },

    handleDel(userId) {
      console.log(userId);
      const user = {
        id: userId,
      };
      loDeleteById(user).then((res) => {
        this.getDate();
        if (res.code == 0) {
          this.$message({
            showClose: true,
            message: "删除成功",
            type: "success",
          });
        } else {
          this.$message({
            showClose: true,
            message: "删除失败",
            type: "erorr",
          });
        }
      });
    },
    handleEdit() {},
    getUserJoinTeam(user) {
      const params = { userName: user.userName };
      this.userId = user.id;
      this.teamUserName = user.userName;
      getTeamListByUser(params).then((res) => {
        if (res.code == 0) {
          if (res.data.length != 0) {
            this.teamList = res.data;
          } else {
            this.$message({
              message: "你还未注册",
              type: "warn",
            });
          }
        }
      });
    },
    async openTeamDialog(user) {
      this.teamList = [];
      await this.getUserJoinTeam(user);
      this.teamDialog = true;
    },
    exitTeam(team) {
      const teamUser = {
        userId: this.userId,
        teamId: team.id,
      };
      console.log(teamUser);
      LoDeletedUserAndTeamRea(teamUser).then((res) => {
        this.getDate();
        if (res.code == 0) {
          this.$message({
            showClose: true,
            message: "删除成功",
            type: "success",
          });
        } else {
          this.$message({
            showClose: true,
            message: "删除失败",
            type: "erorr",
          });
        }
      });
      const params = { userName: this.teamUserName };
      this.getUserJoinTeam(params);
    },
  },
  mounted() {
    this.getDate();
    this.getTeam();
  },
};
</script>
<style lang="scss" scoped>
.el-input {
  width: 150px;
  padding: 10px;
}
.el-select {
  width: 150px;
}
.el-table-column {
  text-align: center;
}
.main {
  margin-left: 30px;
}
.pagination {
  margin-top: 30px;
  text-align: center;
}
.el-input {
  width: 200px;
}
.el-textarea {
  width: 200px;
}
.el-select {
  width: 200px;
}
</style>
